<!DOCTYPE html>

<html>
<head>
  <title>blenders.coffee</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
  <link rel="stylesheet" media="all" href="docco.css" />
</head>
<body>
  <div id="container">
    <div id="background"></div>
    
      <ul id="jump_to">
        <li>
          <a class="large" href="javascript:void(0);">Jump To &hellip;</a>
          <a class="small" href="javascript:void(0);">+</a>
          <div id="jump_wrapper">
          <div id="jump_page">
            
              
              <a class="source" href="analyze.html">
                analyze.coffee
              </a>
            
              
              <a class="source" href="autoload.html">
                autoload.coffee
              </a>
            
              
              <a class="source" href="blender.html">
                blender.coffee
              </a>
            
              
              <a class="source" href="calculate.html">
                calculate.coffee
              </a>
            
              
              <a class="source" href="caman.html">
                caman.coffee
              </a>
            
              
              <a class="source" href="convert.html">
                convert.coffee
              </a>
            
              
              <a class="source" href="event.html">
                event.coffee
              </a>
            
              
              <a class="source" href="filter.html">
                filter.coffee
              </a>
            
              
              <a class="source" href="io.html">
                io.coffee
              </a>
            
              
              <a class="source" href="layer.html">
                layer.coffee
              </a>
            
              
              <a class="source" href="logger.html">
                logger.coffee
              </a>
            
              
              <a class="source" href="module.html">
                module.coffee
              </a>
            
              
              <a class="source" href="pixel.html">
                pixel.coffee
              </a>
            
              
              <a class="source" href="plugin.html">
                plugin.coffee
              </a>
            
              
              <a class="source" href="renderer.html">
                renderer.coffee
              </a>
            
              
              <a class="source" href="store.html">
                store.coffee
              </a>
            
              
              <a class="source" href="util.html">
                util.coffee
              </a>
            
              
              <a class="source" href="blenders.html">
                blenders.coffee
              </a>
            
              
              <a class="source" href="filters.html">
                filters.coffee
              </a>
            
              
              <a class="source" href="size.html">
                size.coffee
              </a>
            
              
              <a class="source" href="blur.html">
                blur.coffee
              </a>
            
              
              <a class="source" href="camera.html">
                camera.coffee
              </a>
            
              
              <a class="source" href="compoundBlur.html">
                compoundBlur.coffee
              </a>
            
              
              <a class="source" href="edges.html">
                edges.coffee
              </a>
            
              
              <a class="source" href="posterize.html">
                posterize.coffee
              </a>
            
              
              <a class="source" href="presets.html">
                presets.coffee
              </a>
            
              
              <a class="source" href="rotate.html">
                rotate.coffee
              </a>
            
              
              <a class="source" href="stackBlur.html">
                stackBlur.coffee
              </a>
            
              
              <a class="source" href="threshold.html">
                threshold.coffee
              </a>
            
          </div>
        </li>
      </ul>
    
    <ul class="sections">
        
          <li id="title">
              <div class="annotation">
                  <h1>blenders.coffee</h1>
              </div>
          </li>
        
        
        
        <li id="section-1">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-1">&#182;</a>
              </div>
              <p>Directly apply the child layer&#39;s pixels to the parent layer with no special changes</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>Blender.register <span class="string">"normal"</span>, (rgbaLayer, rgbaParent) -&gt;
  r: rgbaLayer.r
  g: rgbaLayer.g
  b: rgbaLayer.b</pre></div></div>
            
        </li>
        
        
        <li id="section-2">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-2">&#182;</a>
              </div>
              <p>Apply the child to the parent by multiplying the color values. This generally creates contrast.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>Blender.register <span class="string">"multiply"</span>, (rgbaLayer, rgbaParent) -&gt;
  r: (rgbaLayer.r * rgbaParent.r) / <span class="number">255</span>
  g: (rgbaLayer.g * rgbaParent.g) / <span class="number">255</span>
  b: (rgbaLayer.b * rgbaParent.b) / <span class="number">255</span>

Blender.register <span class="string">"screen"</span>, (rgbaLayer, rgbaParent) -&gt;
  r: <span class="number">255</span> - (((<span class="number">255</span> - rgbaLayer.r) * (<span class="number">255</span> - rgbaParent.r)) / <span class="number">255</span>)
  g: <span class="number">255</span> - (((<span class="number">255</span> - rgbaLayer.g) * (<span class="number">255</span> - rgbaParent.g)) / <span class="number">255</span>)
  b: <span class="number">255</span> - (((<span class="number">255</span> - rgbaLayer.b) * (<span class="number">255</span> - rgbaParent.b)) / <span class="number">255</span>)
  

Blender.register <span class="string">"overlay"</span>, (rgbaLayer, rgbaParent) -&gt;
  result = {}
  result.r = 
    <span class="keyword">if</span> rgbaParent.r &gt; <span class="number">128</span>
      <span class="number">255</span> - <span class="number">2</span> * (<span class="number">255</span> - rgbaLayer.r) * (<span class="number">255</span> - rgbaParent.r) / <span class="number">255</span>
    <span class="keyword">else</span> (rgbaParent.r * rgbaLayer.r * <span class="number">2</span>) / <span class="number">255</span>

  result.g =
    <span class="keyword">if</span> rgbaParent.g &gt; <span class="number">128</span>
      <span class="number">255</span> - <span class="number">2</span> * (<span class="number">255</span> - rgbaLayer.g) * (<span class="number">255</span> - rgbaParent.g) / <span class="number">255</span>
    <span class="keyword">else</span> (rgbaParent.g * rgbaLayer.g * <span class="number">2</span>) / <span class="number">255</span>

  result.b =
    <span class="keyword">if</span> rgbaParent.b &gt; <span class="number">128</span>
      <span class="number">255</span> - <span class="number">2</span> * (<span class="number">255</span> - rgbaLayer.b) * (<span class="number">255</span> - rgbaParent.b) / <span class="number">255</span>
    <span class="keyword">else</span> (rgbaParent.b * rgbaLayer.b * <span class="number">2</span>) / <span class="number">255</span>

  result

Blender.register <span class="string">"difference"</span>, (rgbaLayer, rgbaParent) -&gt;
  r: rgbaLayer.r - rgbaParent.r
  g: rgbaLayer.g - rgbaParent.g
  b: rgbaLayer.b - rgbaParent.b

Blender.register <span class="string">"addition"</span>, (rgbaLayer, rgbaParent) -&gt;
  r: rgbaParent.r + rgbaLayer.r
  g: rgbaParent.g + rgbaLayer.g
  b: rgbaParent.b + rgbaLayer.b

Blender.register <span class="string">"exclusion"</span>, (rgbaLayer, rgbaParent) -&gt;
  r: <span class="number">128</span> - <span class="number">2</span> * (rgbaParent.r - <span class="number">128</span>) * (rgbaLayer.r - <span class="number">128</span>) / <span class="number">255</span>
  g: <span class="number">128</span> - <span class="number">2</span> * (rgbaParent.g - <span class="number">128</span>) * (rgbaLayer.g - <span class="number">128</span>) / <span class="number">255</span>
  b: <span class="number">128</span> - <span class="number">2</span> * (rgbaParent.b - <span class="number">128</span>) * (rgbaLayer.b - <span class="number">128</span>) / <span class="number">255</span>

Blender.register <span class="string">"softLight"</span>, (rgbaLayer, rgbaParent) -&gt;
  result = {}

  result.r =
    <span class="keyword">if</span> rgbaParent.r &gt; <span class="number">128</span>
      <span class="number">255</span> - ((<span class="number">255</span> - rgbaParent.r) * (<span class="number">255</span> - (rgbaLayer.r - <span class="number">128</span>))) / <span class="number">255</span>
    <span class="keyword">else</span> (rgbaParent.r * (rgbaLayer.r + <span class="number">128</span>)) / <span class="number">255</span>

  result.g =
    <span class="keyword">if</span> rgbaParent.g &gt; <span class="number">128</span>
      <span class="number">255</span> - ((<span class="number">255</span> - rgbaParent.g) * (<span class="number">255</span> - (rgbaLayer.g - <span class="number">128</span>))) / <span class="number">255</span>
    <span class="keyword">else</span> (rgbaParent.g * (rgbaLayer.g + <span class="number">128</span>)) / <span class="number">255</span>

  result.b =
    <span class="keyword">if</span> rgbaParent.b &gt; <span class="number">128</span>
      <span class="number">255</span> - ((<span class="number">255</span> - rgbaParent.b) * (<span class="number">255</span> - (rgbaLayer.b - <span class="number">128</span>))) / <span class="number">255</span>
    <span class="keyword">else</span> (rgbaParent.b * (rgbaLayer.b + <span class="number">128</span>)) / <span class="number">255</span>

  result

Blender.register <span class="string">"lighten"</span>, (rgbaLayer, rgbaParent) -&gt;
  r: <span class="keyword">if</span> rgbaParent.r &gt; rgbaLayer.r <span class="keyword">then</span> rgbaParent.r <span class="keyword">else</span> rgbaLayer.r
  g: <span class="keyword">if</span> rgbaParent.g &gt; rgbaLayer.g <span class="keyword">then</span> rgbaParent.g <span class="keyword">else</span> rgbaLayer.g
  b: <span class="keyword">if</span> rgbaParent.b &gt; rgbaLayer.b <span class="keyword">then</span> rgbaParent.b <span class="keyword">else</span> rgbaLayer.b

Blender.register <span class="string">"darken"</span>, (rgbaLayer, rgbaParent) -&gt;
  r: <span class="keyword">if</span> rgbaParent.r &gt; rgbaLayer.r <span class="keyword">then</span> rgbaLayer.r <span class="keyword">else</span> rgbaParent.r
  g: <span class="keyword">if</span> rgbaParent.g &gt; rgbaLayer.g <span class="keyword">then</span> rgbaLayer.g <span class="keyword">else</span> rgbaParent.g
  b: <span class="keyword">if</span> rgbaParent.b &gt; rgbaLayer.b <span class="keyword">then</span> rgbaLayer.b <span class="keyword">else</span> rgbaParent.b</pre></div></div>
            
        </li>
        
    </ul>
  </div>
</body>
</html>
